<template>
  <div class='questions-preview'>
    <!-- <span v-if="scope.questionType === 1">【题型】: 单选</span>
      <span v-else>【题型】: 多选</span> -->
    <div class="module">
      <span>【题型】: {{scope.questionType === '1'?'单选':'多选'}}</span>
      <span>【编号】: {{scope.id}}</span>
      <span v-if="scope.difficulty === 1">【难度】: 简单</span>
      <span v-else-if="scope.difficulty === 2">【难度】: 一般</span>
      <span v-else>【难度】: 困难</span>
      <span>【标签】: {{scope.tags}}</span>
      <span>【学科】: {{scope.subject}}</span>
      <!-- <span v-else>【学科】: java</span> -->
      <span>【目录】: {{scope.catalog}}</span>
      <span>【方向】: {{scope.direction}}</span>
    </div>
    <el-divider></el-divider>
    <span>【题干】:</span>
    <span v-html="scope.question"></span>
    <span>{{scope.questionType === '1'?'单选题':'多选题'}} 选项: （以下选中的选项为正确答案）</span>
    <br>

    <!-- 单选 -->
    <div v-if="scope.questionType === '1'">
      <el-radio v-model="radio"
                :label=item.isRight
                v-for="(item, index) in details.options"
                :key="index">{{item.title}}
      </el-radio>
    </div>
    <!-- 多选 -->
    <div v-else>
      <!-- <el-checkbox
        :checked = "item.isRight === 1? true : false"
        v-for="(item,index) in details.options"
        :key="index">{{item.title}}</el-checkbox> -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label=item.isRight
                     v-for="(item,index) in details.options"
                     :key="index">{{item.title}}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <el-divider></el-divider>

    <span>【参考答案】:</span>&nbsp;
    <el-button type="danger"
               @click="controlsVideo">视频答案预览</el-button>
    <br>
    <video width="320"
           height="240"
           controls
           v-if="isShow">
      <source :src="scope.videoURL"
              type="video/mp4">
    </video>
    <el-divider></el-divider>
    <span>【答案解析】:</span> <br>
    <span v-html="scope.answer"></span>
    <el-divider></el-divider>
    <span>【题目备注】:</span> <br>
    <span>{{scope.remarks}}</span>
  </div>
</template>
<script>
export default {
  name: 'questionsPreview',
  components: {},
  props: {
    scope: {
      type: Object,
      required: true
    },
    details: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      radio: 1,
      isShow: false,
      checkList: [1]
    }
  },
  computed: {},
  watch: {},
  methods: {
    controlsVideo () {
      this.isShow = !this.isShow
    }
  },
  created () {},
  mounted () {}
}
</script>
<style  scoped>
.module {
  display: flex;
  flex-wrap: wrap;
}
.module span {
  font-size: 16px;
  margin: 0 20px;
  margin-bottom: 10px;
}
</style>
